<template>
  <div class="wrapper">
  			
  			<!-- header部分 -->
  			<header>
  				<p>在线支付</p>
  			</header>
  			
  			<!-- 订单信息部分 -->
  			<h3>订单信息：</h3>
  			<div class="order-info">
  				<p>
  					{{this.businessInfo.businessName}}
  					<i class="fa fa-caret-down" id="showBtn"></i>
  				</p>
  				<p id="price">&#165;{{this.price}}</p>
  			</div>
  			
  			<!-- 订单明细部分 -->
  			<ul class="order-detailet" id="detailetBox">
  				<li v-for="item in foodList">
  					<p>{{item.foodName}} x {{item.number}}</p>
  					<p>&#165;{{item.foodPrice}}</p>
  				</li>
  			</ul>
  			
  			<!-- 支付方式部分 -->
  			<ul class="payment-type">
  				<li>
  					<img src="../assets/alipay.png">
  					<input type="radio" name="flag" checked>
  				</li>
  				<li>
  					<img src="../assets/wechat.png">
  					<input type="radio" name="flag" >
  				</li>
  			</ul>
  			<div class="payment-button">
  				<button @click="topayment()">确认支付</button>
  			</div>
  			
  			<!-- 底部菜单部分 -->
  			<ul class="footer">
  				<li onclick="location.href='index.html'">
  					<i class="fa fa-home"></i>
  					<p>首页</p>
  				</li>
  				<li>
  					<i class="fa fa-compass"></i>
  					<p>发现</p>
  				</li>
  				<li onclick="location.href='order.html'">
  					<i class="fa fa-file-text-o"></i>
  					<p>订单</p>
  				</li>
  				<li onclick="javaScript:location.href='login.html'">
  					<i class="fa fa-user-o"></i>
  					<p>我的</p>
  				</li>
  			</ul>
  		</div>	
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  components:{
        Footer
    },
    data(){
        return{
			orderId:this.$route.params.orderId,
			order:[],
			foodList:[],
			businessInfo:[],
			price:3,
			userId:this.$store.state.userId,
        }
    },
    computed:{
		
    },
    created(){
		this.getFoodList();
		this.getOrder();
    },
    methods:{
		getFoodList:function() {
			this.$http.get("/api/OrderController/getFoodList?orderId=" + this.orderId + "&userId=" + localStorage.getItem('userId')).then(response => {
				this.foodList = response.data.result;
				for (var i = 0; i < this.foodList.length; i++) {
					this.price += this.foodList[i].foodPrice * this.foodList[i].number;
				}
			})
		},
		getOrder:function() {
			this.$http.get("/api/OrderController/getOrder?orderId=" + this.orderId + "&userId=" + localStorage.getItem('userId')).then(response => {
				this.order = response.data.result;
				this.businessId = this.order.businessId;
				this.$http.get("/api/BusinessController/findById?id=" + this.businessId).then(response => {
					this.businessInfo = response.data.result;
				})
			})
		},
		topayment:function() {
			this.$http.post(`/api/OrderController/deleteOrder?orderId=${this.orderId}&businessId=${this.businessInfo.businessId}&userId=` + localStorage.getItem('userId')).then(response => {
				if (response.data.flag === true) {
					this.$router.push(`/businessInfo/${this.businessInfo.businessId}`);
				}
			})
		}
    }
}
</script>

<style>
	.wrapper{
		width: 100%;
		height: 100%;
	}
	
	/****************** header部分 ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 订单信息部分 ******************/
	.wrapper h3{
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;
		
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}
	.wrapper .order-info{
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order-info p:last-child{
		color: orangered;
	}
	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet{
		width: 100%;
	}
	.wrapper .order-detailet li{
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order-detailet li p{
		font-size: 3vw;
		color: #666;
	}
	
	/****************** 支付方式部分 ******************/
	.wrapper .payment-type{
		width: 100%;
	}
	.wrapper .payment-type li{
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .payment-type li img{
		width: 33vw;
		height: 8.9vw;
	}
	.wrapper .payment-type li .fa-check-circle{
		font-size: 5vw;
		color: #38CA73;
	}
	.wrapper .payment-type li input{
		width: 4.5vw;
		height: 4.5vw;	
	}
	.wrapper .payment-button{
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}
	.wrapper .payment-button button{
		width: 100%;
		height: 10vw;
		border: none;
		/*去掉外轮廓线*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
	}
	/****************** 底部菜单部分 ******************/
	.wrapper .footer{
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		
		position: fixed;
		left: 0;
		bottom: 0;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wrapper .footer li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		color: #999;
		user-select: none;
		cursor: pointer;
	}
	.wrapper .footer li p{
		font-size: 2.8vw;
	}
	.wrapper .footer li i{
		font-size: 5vw;
	}
</style>